<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-07-10 09:19:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-15 14:52:00
 * @FilePath: \cip-admin\src\pages\company\information\third-party-company\components\sheet.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 表格组件 -->
<script lang="ts" setup>
import type { TableInstance } from "element-plus";

import { injectState } from "../state";
import DetailDialog from "./detail-dialog.vue";
import SheetItem from "./sheet-item.vue";

defineOptions({ name: "Sheet" });

const {
	selectedList,
	page: { records, isLoading },
} = injectState()!;

const detailDialogRef = shallowRef<InstanceType<typeof DetailDialog>>();

const tableRef = shallowRef<TableInstance>();

watch(records, () => tableRef.value?.clearSelection());

const selectionChange = (rows: any) => {
	selectedList.value = toRaw(rows);
};
</script>

<template>
	<el-table
		ref="tableRef"
		v-loading="isLoading"
		:data="records"
		h="100%!"
		@selection-change="selectionChange"
	>
		<el-table-column type="selection" width="40" fixed="left" />

		<SheetItem />

		<el-table-column
			v-slot="{ row }"
			label="操作"
			align="center"
			width="200"
			fixed="right"
		>
			<el-button
				size="small"
				type="primary"
				text
				@click="detailDialogRef?.trigger('detail', row)"
                v-if="row.trainStatus==='1'"
			>
				详情
			</el-button>
			<el-button
				size="small"
				type="primary"
				text
				@click="detailDialogRef?.trigger('edit', row)"
                v-else
			>
				上传安全教育记录
			</el-button>
		</el-table-column>
	</el-table>
	<DetailDialog ref="detailDialogRef" />
</template>
